<template>
  <mt-multi-picker
    columns="{{columns}}"
    value="{{inner_value}}"
    @change="onChange"
    @live-change="onLiveChange"
    @pickerready="onPickerReady"
    id="picker"
  >
    <view class="mt-region-select__init" slot="initial"><slot name="initial"></slot></view>
  </mt-multi-picker>
</template>

<script>
  const app = getApp()

  const liveBehavior = require('../../behaviors/live.behavior')

  let regions = {}

  export default {
    behaviors: [
      'wx://form-field',
      liveBehavior,
    ],
    relations: {
      '../mt-liveform/index': {
        type: 'ancestor', // 关联的目标节点应为祖先节点
      },
    },
    properties: {
      defaultValue: Array
    },
    data() {
      return {
        columns: null,
        oldTmpVal: null,
        cachedValue: null,
        inner_value: null
      }
    },
    attached: function () {
      regions = this.$cache.get('appregions')
      console.d('regions', regions)
      if (this.data.defaultValue && this.data.defaultValue.length > 0) {
        this.setValue(this.data.defaultValue)
      } else {
        this.setColumns(0)
      }
      this.$native.emit('ready', {
        context: this
      })
    },
    methods: {
      setValue(value) {
        this.setData({
          cachedValue: value
        })
        this.setColumns(value[0])
      },
      onPickerReady(e) {
        const { context } = e.detail
        console.log('region select onPickerReady', this.data.cachedValue)
        if (this.data.cachedValue) {
          context.setLabel(this.data.cachedValue)
          this.setIndex(this.data.cachedValue)
        }
      },
      onChange(e) {
        let newVal = e.detail.value
        this.mtLiveCall(newVal)
        this.$native.emit('change', {
          value: newVal
        })
      },
      onLiveChange(e) {
        const { picker, value, index } = e.detail;
        let changedIndex = value.map( v => v.value )
        console.d('onLiveChange', value, index, changedIndex)
        if (index === 0) {
          this.setIndex([
            changedIndex[0],
            0
          ])
          this.setCitys(changedIndex[0])
        }
      },
      setIndex(value){
        this.$set({
          inner_value: value,
          cachedValue: null
        })
      },
      setColumns(provinceIndex) {
        // console.log('setColumns',
        //   [
        //     regions.show[0],
        //     regions.show[1][provinceIndex],
        //   ]
        // )
        this.$set({
          [`columns`]: [
            regions.show[0],
            regions.show[1][provinceIndex],
          ]
        })
      },
      setProvinces(provinceIndex) {
        if (regions.show[0]) {
          this.$set({
            [`columns[0]`]: regions.show[0],
          })
        }
      },
      setCitys(provinceIndex) {
        if (regions.show[1][provinceIndex]) {
          this.$set({
            [`columns[1]`]: regions.show[1][provinceIndex],
          })
        }
      },
      getOption(columnIndex, index) {
        return  regions.data[columnIndex][index]
      },
      getIndex(columnIndex, option, provinceIndex) {
        if (columnIndex === 0) {
          return regions.data[0].findIndex(v => {
            return v.uuid === option.uuid
          })
        }
        if (columnIndex === 1) {
          return regions.data[1][provinceIndex].findIndex(v => {
            return v.uuid === option.uuid
          })
        }
      },

      setRegion(province, city) {
        let _provinceIndex = this.getIndex(0, province)
        if (_provinceIndex < 0) {
          console.error('region select province index',  _provinceIndex)
          return
        }
        let _cityIndex = this.getIndex(1, city, _provinceIndex)
        console.d('region select', province, city)
        if (_cityIndex < 0 || _provinceIndex < 0) {
          console.error('region select index wrong',  _provinceIndex, _cityIndex)
        }
        let _value = [
          _provinceIndex,
          _cityIndex
        ]
        this.setValue(_value)
        return _value
      }
    },
  }
</script>

<style lang="scss">
</style>
